<template lang='pug'>
append var
-var imgurl = '../../../static/image/'
  .main
    v-loading(v-if='$route.params.id=="1"')
    v-progress(v-if='$route.params.id=="0" && pop_index')
    v-progressG(v-if='$route.params.id=="2"' id="gold")
    v-thressseed(v-if='$route.params.id=="2"')
    img(src=imgurl+'startGame.png' , alt="" v-show='!pop_index && seedflag' class='startGame' @click='start')
    .inner
      .main-top
        .main-left
          img(src=imgurl+'voice.png' align='top')
          span.notice
            .divnotice#noticeone(v-html='notice')
            .divnotice#noticetwo(v-html='notice')
      .main-top
        .main-xxx
        .main-right
          img(src=imgurl+'point.png' 	align = 'middle' @click='$router.push({path:"/ginsengBalance"})' )
          span(style='top: 10px;position: relative;') 金种子：{{userInfo.seeds_amount}}枚
      .main-top
        span(style='width:20px;')
        .main-right
          img(src=imgurl+'ying.png' 	align = 'middle' @click='$router.push({path:"/ginsengBalance"})' style='cursor:pointer;')
          span(style='top: 10px;position: relative;') 银种子：{{userInfo.silver_seeds_amount}}枚
      .main-top
        span(style='width:20px;')
        .main-right
          img(src=imgurl+'tong.png' 	align = 'middle' @click='$router.push({path:"/ginsengBalance"})' style='cursor:pointer;')
          span(style='top: 10px;position: relative;') 铜种子：{{userInfo.copper_seeds_amount}}枚
      .main-top
        .main-xxx
        //- .main-right-two(styke='text-align: right' :data-attr="'数量不足，请充值'" @click='$router.push({path:"/ginsengRecharge"})') 数量不足，请充值
      .main-top
        .main-xxx
        .main-right-mountain
          img(src=imgurl+'gold2.png')
      .main-top
        .main-xxxx
        .main-right(style='font-size: 16px;background-size:100% 80%;')
          img(src=imgurl+'ginseng.png' 	align = 'middle' @click='$router.push({path:"/assets"})' )
          span(style="position: relative;top: -5px;left: 0px;") 参王： {{sengking+'株'}}
          br
          br
          span(style="position: relative;top: -63px;left: 76px;") 极品： {{sengbest+'株'}}
      .main-top
        .main-xxx
        .main-right-mountain
          img(src=imgurl+'gold3.png')
      .main-top
        .main-xxxx
        .main-right(style='font-size: 16px;background-size:100% 80%;')
          img(src=imgurl+'ginseng.png' 	align = 'middle' @click='$router.push({path:"/assets"})' )
          span(style="position: relative;top: -5px;left: 0px;") 参王： {{sengking+'株'}}
          br
          br
          span(style="position: relative;top: -63px;left: 76px;") 极品： {{sengbest+'株'}}
      .main-top
        .main-xxx
        .main-right-mountain
          img(src=imgurl+'gold4.png')
      .main-top
        .main-xxxx
        .main-right(style='font-size: 16px;background-size:100% 80%;')
          img(src=imgurl+'ginseng.png' 	align = 'middle' @click='$router.push({path:"/assets"})' )
          span(style="position: relative;top: -5px;left: 0px;") 参王： {{sengking+'株'}}
          br
          br
          span(style="position: relative;top: -63px;left: 76px;") 极品： {{sengbest+'株'}}
      //- .main-middle
      //- 	.main-middle-son(:data-attr='"挖参秘籍"') 挖参秘籍
      .main-bottom
        img(src= imgurl+'mouse.png' v-for='(item,index) in 5' :key='index' v-show='show')
        ul
          li(v-for='(item,index) in 40' :key='index')
            img(src=imgurl+'3s.png' style='width:56px;height:36px;')
    .Popup-three(v-show='pop_three')
      img.close(src=imgurl + 'X-btn.png' @click='gameclose')
      .main-three-son-one(:data-attr='"游戏结束"') 游戏结束
      .cloce(data-attr='请耐心等待后台抽奖') 请耐心等待后台抽奖
      .sure
        .sure-son(:data-attr='"确定"'  @click='gameclose') 确定
    .Popup-one(v-show='false')
      .Popup-one-top(style='')
        span(data-attr='开始游戏') 开始游戏
        .ccc
          img(src=imgurl+'seedclose.png' @click='pop_index=false')
      .Popup-one-top
        span(data-attr='金种子:') 金种子:
        input.bpxnumber(type='text' v-model='mountJ')
      .Popup-one-top
        span(data-attr='银种子:') 银种子:
        input.bpxnumber(type='text' v-model='mountY')
      .Popup-one-top
        span(data-attr='铜种子:') 铜种子:
        input.bpxnumber(type='text' v-model='mountT')
      .Popup-one-bottom
        img(src=imgurl+'X-btn.png' @click='pop_index=false')
        img(src=imgurl+'Accept-btn.png' @click='start')
</template>
<script>
import con from "./../table";
import $ from "jquery";
import progress from "../progressbar.vue";
import progressG from "../progressbarG.vue";
import loading from "../loading.vue";
import thressseed from "../thressseed.vue";

function randomsort(a, b) {
  return Math.random() > 0.5 ? -1 : 1;
}
export default {
  data() {
    return {
      pop_index: true,
      show: true,
      mountJ: 0,
      mountY: 0,
      mountT: 0,
      pop_three: false,
      list: {},
      userInfo: u.getStore("userInfo"),
      mount: u.getStore("mount") || 0,
      sengbest: 0, //极品人参默认总量
      sengKing: 0, //参王默认总量
      seedflag: true,
      notice: "",
      seed_total:0,//金银铜种子总额
    };
  },
  components: {
    "v-progress": progress,
    "v-progressG": progressG,
    "v-loading": loading,
    "v-thressseed": thressseed
  },
  created() {
    u.userInfo(() => {
      this.userInfo = u.getStore("userInfo");
      // this.seed_total=this.userInfo.seeds_amount+this.userInfo.silver_seeds_amount+this.userInfo.copper_seeds_amount;//金银铜种子总额
      u.seednotice(data => {
        if (data && data[0].data && data[0].data.length) {
          data[0].data.forEach(el => {
            this.notice +=
              el.content +
              "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp";
          });
          this.animated("1");
          this.animated("2");
        }
        u.flag = true;
      });
    });
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
    // if (u.getStore("mount") < 10000) {
    //   alert("种子余额不足10000，请充值");
    //   this.$router.push({ path: "/ginsengRecharge" });
    //   return;
    // }
    this.seng();
    // this.seed();
  },

  methods: {
    animated(id) {
      window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
      let idcla = id == "1" ? "noticeone" : "noticetwo";
      let elem = document.getElementById(idcla);
      let left = 0;
      requestAnimationFrame(step);
      function step() {
        if (left > -2 * elem.offsetWidth) {
          left -= 1;
          elem.style.left = left + "px";
          requestAnimationFrame(step);
          if (left == -elem.offsetWidth) {
            if (id == "1") {
              left = elem.offsetWidth;
            }
          } else if (left == -2 * elem.offsetWidth) {
            left = 0;
          }
        }
      }
    },
    gameclose() {
      this.pop_three = false;
      // setTimeout(() => {
      //   if (confirm("是否再玩一次")) {
      //     this.seed();
      //     // this.pop_index = true;
      //   }
      // }, 100);
    },
    start() {
      this.seed();
      this.seedflag = false;
      // let mount =
      //   parseInt(this.mountJ) + parseInt(this.mountY) + parseInt(this.mountT);
      // if (this.mountJ < 0 || this.mountY < 0 || this.mountT < 0) {
      //   alert("输入的种子数量有误，请输入正确的种子数量");
      //   return;
      // }
      // if (mount <= 0 || mount > 4000) {
      //   alert("输入的种子总数在0-4000之间，请输入正确的输入总数");
      //   return;
      // }
      // if (this.mountJ > this.userInfo.seeds_amount) {
      //   alert("金种子余额不足");
      //   return;
      // }
      // if (this.mountY > this.userInfo.silver_seeds_amount) {
      //   alert("银种子余额不足");
      //   return;
      // }
      // if (this.mountT > this.userInfo.copper_seeds_amount) {
      //   alert("铜种子余额不足");
      //   return;
      // }
      // this.pop_index = false;

      // u.consume(
      //   {
      //     gold_seed_num: this.mountJ,
      //     silver_seed_num: this.mountY,
      //     copper_seed_num: this.mountT,
      //     username: u.getStore("user").userid,
      //     type: 1
      //   },
      //   data => {}
      // );
    },
    //极品人参和参王的数量
    seng() {
      this.sengking =
        u.getStore("userInfo").one_ginseng +
        u.getStore("userInfo").two_ginseng +
        u.getStore("userInfo").three_ginseng;
      this.sengbest =
        u.getStore("userInfo").one_best_ginsen +
        u.getStore("userInfo").two_best_ginsen +
        u.getStore("userInfo").three_best_ginsen;
    },
    seed() {
      var i = 0;
      var arr = [];
      while (i < 40) {
        arr.push(i);
        i++;
      }
      arr.sort(randomsort);
      var max_left =
        $(".main-bottom>ul>li:eq(0)").width() -
        $(".main-bottom>ul>li:eq(0)>img").width();
      var max_top =
        $(".main-bottom>ul>li:eq(0)").height() -
        $(".main-bottom>ul>li:eq(0)>img").height();
      arr.forEach(function(item, index) {
        $(".main-bottom>ul>li")
          .eq(item)
          .css({
            transition: "all 1s " + (index / 15 + 2) + "s ease",
            top: "900px",
            transform: "rotateZ(360deg)"
          });
        $(".main-bottom>ul>li")
          .eq(item)
          .find("img")
          .css({
            top: Math.random() * max_top + "px",
            left: Math.random() * max_left + "px"
          });
      });
      this.time = (arr.length / 15 + 2 + 1) * 1000;
      var that = this;
      max_left = $(".main-bottom").width() - $(".main-bottom>img").width();
      max_top = $(".main-bottom").height() - $(".main-bottom>img").height();
      setTimeout(function() {
        var length = $(".main-bottom>img").length;
        setTimeout(function() {
          $(".main-bottom>img").css("opacity", "1");
          var timer = setInterval(function() {
            arr.sort(randomsort);
            if (arr.length == 0) {
              clearInterval(timer);
              $(".main-bottom>ul>li")
                .css({
                  transition: "none",
                  top: "0px",
                  transform: "rotateZ(0deg)"
                })
                .append(
                  '<img src="../../../static/image/3s.png" style="position: relative;top:0;left:0;width:56px;height:36px;"/>'
                );
              that.pop_three = true;
              $(".main-bottom>img").css("opacity", "0");
            }
            var list = parseInt(Math.random() * length);
            for (var i = 0; i < length; i++) {
              $(".main-bottom>img:eq(" + i + ")").css({
                top: Math.random() * max_top + "px",
                left: Math.random() * max_left + "px"
              });
              if (i > list) {
                continue;
              }
              $(".main-bottom>ul>li")
                .eq(arr[i])
                .find("img")
                .remove();
              arr.splice(i, 1);
            }
          }, 300);
        }, 10);
        that.show = true;
        for (var i = 0; i < length; i++) {
          $(".main-bottom>img:eq(" + i + ")").css({
            top: Math.random() * max_top + "px",
            left: Math.random() * max_left + "px"
          });
        }
      }, this.time + 100);
    },
    onJin() {

    }
  }
};
</script>
<style lang='less' scoped>
@imgurl: "../../../static/image/";
.main {
  height: calc(100vh - 80px) !important;
  overflow: hidden;
  .inner {
    overflow-y: hidden !important;
  }
}
.startGame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.cloce {
  text-align: center;
  width: 100%;
  color: white;
  .title(3px #a65f0a);
}
.Popup-three {
  height: 274px;
  width: 634px;
  background: url("@{imgurl}Panel-two.png") no-repeat;
  transition: transform 2s ease;
  transform: scale(1);
  z-index: 100;
  .fixed;
  > .main-three-son-one {
    .nav;
    .title(5px #1c6b65);
  }
  > .close {
    position: absolute;
    right: 0;
  }
  > ul {
    min-width: 634px;
    padding: 0 50px;
    width: auto;
    display: flex;
    justify-content: space-between;
    li {
      background: url("@{imgurl}Base-1.png") no-repeat;
      background-size: 100% 100%;
      width: 86px;
      height: 97px;
      text-align: center;
      p {
        line-height: 10px;
      }
      > p:nth-of-type(1) {
        padding-top: 15px;
        height: 50px;
        line-height: 50px;
        color: white;
        font-size: 12px;
      }
      > p:nth-of-type(2) {
        line-height: 2;
        font-size: 14px;
        color: #ffd327;
      }
    }
  }
  .sure {
    position: relative;
    height: 66px;
    > .sure-son {
      height: 66px;
      width: 210px;
      background: url("@{imgurl}excharge.png") no-repeat;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-size: 100%;
      top: 33px;
      line-height: 66px;
      color: #fff;
      font-size: 24.76px;
      text-align: center;
      .title(3px #a65f0a);
    }
  }
}
body,
html {
  width: 100vw;
  height: 100vh;
}
#app {
  width: 100vw;
  height: 100vh;
}
img {
  display: inline-block;
}
.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}
.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}
.title(@color) {
  position: relative;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}
.main {
  background-image: url("@{imgurl}ginsengbg.png");
  background-repeat: no-repeat;
  height: 100%;
  padding-top: 30px;
  background-size: 100% 100%;
  > .inner {
    margin: 0 auto;
    max-width: 1280px;
    height: 100%;
    > .main-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 3px;
      .main-left,
      .main-right {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        box-sizing: border-box;
        line-height: 60px;
      }
      .main-right-mountain{
        position: relative;
        left: -33%;
        line-height: 0;
      }
      // > .main-img {
      //   min-width: 280px;
      //   display: flex;
      //   flex-direction: column;
      //   margin-left: 30px;
      //   > i{
      //     font-size: 20px;
      //     font-style: normal;
      //     color: #ffffff;
      //     margin-bottom: 5px;
      //   }
      //   > img {
      //     width: 70%;
      //     height: 45%;
      //   }
      //   > img:last-of-type {
      //       position: relative;
      //       bottom: 40%;
      //       width: 51%;
      //       left: 1%;
      //   }
      //   > span {
      //     font-size: 12px;
      //     color: #ffffff;
      //     position: relative;
      //     bottom: 67%;
      //     left: 27%;
      //   }
      //   .goldHill {
      //     text-shadow: 0 2px #d0801e, -2px 0 #d0801e, -2px 2px #d0801e,
      //     -3px 1px #d0801e;
      //   }
      //   .sliverHill {
      //     text-shadow: 0 2px #355359, -2px 0 #355359, -2px 2px #355359,
      //     -3px 1px #355359;
      //   }
      //   .copperHill {
      //     text-shadow: 0 2px #ce6851, -2px 0 #ce6851, -2px 2px #ce6851,
      //     -3px 1px #ce6851;
      //   }
      //   .goldText {
      //     text-shadow: 0 2px #914803, -2px 0 #914803, -2px 2px #914803,
      //     -3px 1px #914803;
      //   }
      //   .sliverText {
      //     text-shadow: 0 2px #545454, -2px 0 #545454, -2px 2px #545454,
      //     -3px 1px #545454;
      //   }
      //   .copperText {
      //     text-shadow: 0 2px #b43717, -2px 0 #b43717, -2px 2px #b43717,
      //     -3px 1px #b43717;
      //   }
      // }
      > .main-right {
        min-width: 280px;
        height: 70px;
        background-image: url("@{imgurl}ginseng_base.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100% 90%;
        text-shadow: 0 2px #225f9a, -2px 0 #225f9a, -2px 2px #225f9a,
          -3px 1px #225f9a;
        margin-right: 32px;
        line-height: 30px;
        > img {
          width: 61px;
          height: 63px;
          position: relative;
          top: 5px;
        }
        span {
          font-size: 20px;
        }
        > img {
          margin-right: 13px;
          position: relative;
          top: 3px;
        }
      }
      > .main-right-two {
        color: #fff;
        font-size: 22px;
        position: relative;
        top: -10px;
        padding-right: 30px;
        .title(5px #c64d48);
      }
      > .main-left {
        height: 60px;
        width: 480px;
        background-image: url("@{imgurl}notice_1.png");
        background-size: 480px 60px;
        text-shadow: -1px 2px 2px #3a230a;
        margin-left: 30px;
        > .notice {
          display: inline-block;
          width: 80%;
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          > .divnotice {
            display: inline-block;
            font-size: 20px;
            font-weight: 700;
            position: relative;
            left: 0px;
          }
        }
        > img {
          margin: 0px 20px;
          position: relative;
          top: 11px;
        }
      }
    }
    > .main-middle {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
      > .main-middle-son {
        background-image: url("@{imgurl}excharge.png");
        background-repeat: no-repeat;
        height: 50px;
        width: 160px;
        background-size: 100%;
        margin-right: 30px;
        .font;
        font-size: 22px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        .title(3px #a65f0a);
      }
    }
    > .main-bottom {
      margin-bottom: 40px;
      background-repeat: no-repeat;
      height: 315px;
      background-position: center 42%;
      position: relative;
      z-index: 1;
      > img {
        position: absolute;
        z-index: 100;
        opacity: 0;
        transition: all 0.3s ease;
      }
      > ul {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        top: -900px;
        li {
          height: 25%;
          width: 10%;
          box-sizing: border-box;
          position: relative;
          top: 0;
          transform: rotateZ(0deg);
          img {
            top: 0;
            left: 0;
            position: relative;
          }
        }
      }
    }
  }
}
.Popup-one {
  background: url("@{imgurl}seedstart.png") no-repeat;
  height: 400px;
  width: 460px;
  text-align: center;
  .fixed;
  > .Popup-one-bottom {
    // border: 1px solid #000;
    margin-top: 40px;
    > img:nth-of-type(1) {
      margin-right: 40px;
      width: 50px;
    }
    > img:nth-of-type(2) {
      margin-left: 40px;
      width: 50px;
    }
  }
  > .Popup-one-top {
    height: 70px;
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
    span {
      .title(5px #533c1f);
      font-size: 14px;
      display: inline-block;
    }
    .bpxnumber {
      height: 60px;
      margin-bottom: 15px;
      width: 70%;
      margin-left: 5px;
      padding-left: 20px;
      background: url("../../../static/image/bpxnumber.png") no-repeat;
      background-size: cover;
    }
  }
  > .Popup-one-top:first-child {
    display: flex;
    justify-content: space-between;
    padding: 30px 29px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    span {
      .title(5px #a36829);
      font-size: 22px;
    }
  }
}
.fixed {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
}
</style>
